<script setup lang="ts">
import { ref } from "vue";
import { PureTableBar } from "@/components/RePureTableBar";
import { useRenderIcon } from "@/components/ReIcon/src/hooks";
import Refresh from "@iconify-icons/ep/refresh";

defineOptions({
  name: "MaterialCenter"
});

const formRef = ref();
const tableRef = ref();

const form = ref({
  name: "",
  advertiserId: ""
});

const loading = ref(false);

const columns = ref([
  {
    label: "名称",
    prop: "name",
    width: 200
  },
  {
    label: "ID",
    prop: "id",
    width: 150
  },
  {
    label: "类型",
    prop: "type"
  },
  {
    label: "状态",
    prop: "status",
    slot: true
  },
  {
    label: "覆盖数量",
    prop: "coverage"
  },
  {
    label: "归属账户",
    prop: "advertiser"
  },
  {
    label: "创建时间",
    prop: "createTime",
    width: 180
  }
]);

const dataList = ref([
  {
    name: "KN_73476451_21 90307286_BR_19星_Y5.0116(日)",
    id: "1123462173",
    type: "自定义人群",
    status: "已生效",
    coverage: "12,321",
    advertiser: "广告账户：XXXXXX\n账户ID：123123213",
    createTime: "YYYY/MM/DD HH:MM:SS"
  },
  {
    name: "KN_73476451_21 90307286_BR_19星_Y5.0116(日)",
    id: "9372462173",
    type: "自定义人群",
    status: "已失效",
    coverage: "231",
    advertiser: "",
    createTime: "YYYY/MM/DD HH:MM:SS"
  },
  {
    name: "KN_73476451_21 90307286_BR_19星_Y5.0116(日)",
    id: "2923462982",
    type: "自定义人群",
    status: "已删除",
    coverage: "23",
    advertiser: "",
    createTime: "YYYY/MM/DD HH:MM:SS"
  }
]);

const pagination = ref({
  total: 100,
  pageSize: 10,
  currentPage: 1
});

const handleSizeChange = (val: number) => {
  pagination.value.pageSize = val;
};

const handleCurrentChange = (val: number) => {
  pagination.value.currentPage = val;
};

const onSearch = () => {
  loading.value = true;
  setTimeout(() => {
    loading.value = false;
  }, 500);
};

const resetForm = formEl => {
  if (!formEl) return;
  formEl.resetFields();
};

const handleUpload = () => {
  // 处理上传素材的逻辑
  console.log("上传素材");
};
</script>

<template>
  <div class="main">
    <el-form
      ref="formRef"
      :inline="true"
      :model="form"
      class="search-form bg-bg_color w-[99/100] pl-8 pt-[12px] overflow-auto"
    >
      <el-form-item prop="name">
        <el-input
          v-model="form.name"
          placeholder="通过人群包名称搜索"
          clearable
          class="!w-[240px]"
        />
      </el-form-item>
      <el-form-item prop="advertiserId">
        <el-select
          v-model="form.advertiserId"
          placeholder="通过广告账户筛选"
          clearable
          class="!w-[240px]"
        >
          <el-option label="全部" value="" />
        </el-select>
      </el-form-item>
    </el-form>

    <PureTableBar :columns="columns" @refresh="onSearch">
      <template v-slot="{ size, dynamicColumns }">
        <pure-table
          ref="tableRef"
          align-whole="center"
          showOverflowTooltip
          table-layout="auto"
          :loading="loading"
          :size="size"
          adaptive
          :adaptiveConfig="{ offsetBottom: 200 }"
          :data="dataList"
          :columns="dynamicColumns"
          :pagination="pagination"
          :paginationSmall="size === 'small' ? true : false"
          :header-cell-style="{
            background: 'var(--el-fill-color-light)',
            color: 'var(--el-text-color-primary)'
          }"
          @page-size-change="handleSizeChange"
          @page-current-change="handleCurrentChange"
        >
          <template #status="{ row }">
            <el-tag
              :type="
                row.status === '已生效'
                  ? 'success'
                  : row.status === '已失效'
                    ? 'danger'
                    : 'info'
              "
              size="small"
            >
              {{ row.status }}
            </el-tag>
          </template>
        </pure-table>
      </template>
    </PureTableBar>
  </div>
</template>

<style scoped lang="scss">
.search-form {
  :deep(.el-form-item) {
    margin-bottom: 12px;
  }
}
</style>
